替代文字 Alternative text

看到文章標題也許你會想：「啊不是就是幫元素加上 alt 屬性這麼簡單嗎？」

沒錯，添加替代文字是很容易沒錯，不過理解替代文字的細節可能相對複雜。

讓我們跟著下文一同來瞭解「替代文字」存在的意義以及基本原則！

透過實際範例來練習，建置網站最基礎的可訪問性。

替代文字的作用

• 當圖片失效時，瀏覽器將顯示替代文字。
• 為圖片提供語義的描述，提供給搜尋引擎抓取。
• 使用螢幕閱讀器瀏覽網站，將讀取替代文字，使視覺障礙及某些認知障礙的使用者可以取得圖片的資訊。

沒寫替代文字的話

螢幕閱讀器會唸出 src 屬性中的內容，也就是檔案路徑，非常擾民。

替代文字的基本原則

其實替代文字的內容對於無障礙的實踐影響非常地大，使用者很有可能因為我們填寫的內容不具描述性或使用不貼切的語句，導致他們難以辨識該張圖片是一張怎麼樣的圖片，是裝飾還是有功能的呢？思考圖片在頁面中的定位

1. 幫圖片加上替代文字是最基本的原則，最容易實現，卻不易理解該如何撰寫語句。
2. 可以選擇在圖片 alt 屬性中，或圖片周遭環境中提供「替代文字」說明。
3. 每一張圖片都一定要有 alt 屬性，這是 HTML 的規範。
4. 替代文字應該遵守：
   • 能如實呈現照片的內容或是功能性
   • 簡潔
5. 替代文字應該避免：
   • 冗贅（比如說重複已經在照片相鄰敘述過的內容）
   • 使用「這是一張...的照片」
   • 使用檔案名稱
6. 圖片的上下文內容對於替代文字要如何撰寫影響甚大
7. 一張有功能性的圖片（比如超連結中的圖片），應以「功能描述」作為替代文字內容
8. 裝飾性的圖片還需要有 alt 屬性，值為空即可（比如 alt="" ）
9. 使用正確的標點符號（如逗號或句點字符），這有助於螢幕閱讀器以更“人性化”的聲音方式描述圖像